<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./details.css">
    <link rel="stylesheet" href="../index/index.css">
</head>
<body>
    <div id="top">
        <div class="top-top1">
        <div class="top-top">
            <div class="top-left">
                <a href="javascript:;" class="come">欢迎来到丝芙兰</a>
                <a href="#" class="i one">请登录</a>
                <a href="#" class="one">免费注册</a>
                <a href="#" class="one">手机验证码登录</a>
            </div>
            <div class="top-center top-center-text">
                <div class="top-scroll">
                <ul>
                    <li><a href="#" class="one">丝芙兰防诈骗公告</a></li>
                    <li><a href="#" class="one">丝芙兰配送公告</a></li>
                    <li><a href="#" class="one">丝芙兰正品承诺</a></li>
                    <li><a href="#" class="one">常见问题</a></li>
                </ul>
                </div>
            </div>
            <div class="top-right">
                <span class="toprights">
                    <span class="top-right-tu">
                    </span>
                    <a href="#" class="one top-right-one">我的丝芙兰</a>
                    <span class="top-right-tu2 top-angle"></span>
                    <ul class="top-right-mylist top-angle">
                        <li><a href="#" class="one">我的订单</a></li>
                    </ul>
                </span>
                <span>
                    <span class="top-right-tu3"></span>
                    <a href="#" class="one">会员俱乐部</a>
                </span>
                <span class="toprighttf">
                    <span class="top-right-tu4"></span>
                    <a href="#" class="one">手机丝芙兰 <img src="https://ssl1.sephorastatic.cn/soa/pc/images/downQR2.png" alt="" class="top-right-img"></a>
                </span>
                <span>
                    <a href="#" class="one">帮助中心</a>
                </span> 
            </div>
        </div>
    </div>
    </div>
    <!-- 搜索框====================================================== -->
    <div id="search">
        <div class="search-all">
            <div class="search-left">
                <a href="#"><img src="https://ssl1.sephorastatic.cn/soa/pc/images/sep_top_Logo.png" alt=""></a>
            </div>
            <div class="search-center">
                <div class="search-top">
                    <div class="search-input">
                        <input type="text" placeholder="小众好物品OMG种草">
                    </div>
                    <div class="search-button">搜索</div>
                </div>
                <ul class="search-list">
                    <a href="#" class="one">会员私享75折起</a>
                    <a href="#" class="one">私家划算好物</a>
                    <a href="#" class="one">经典囤货力荐</a>
                    <a href="#" class="one">炎日基础护肤</a>
                    <a href="#" class="one">人气彩香合辑</a>
                    <a href="#" class="one">小众尖货精选</a>
                </ul>
            </div>
            <div class="search-right">
                <div class="search-main">
                    <a href="#" class="search-a">
                        <em class="shopping-bag"></em>
                        购物袋
                        <span class="shopping-num">0</span>
                        件
                    </a>
                </div>
    
                <div class="search-cart">
                    <div class="search-active">
                        <em></em>
                        <span>购物车内暂时没有商品，登陆后将显示您之前加入的商品</span>
                        <a href="#">
                            <div>登录</div>
                        </a>
                    </div>
                </div>
            </div>
            <a href="javascript:void(0);" class="search-bottom">
                <img src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2018/06/banner/navigation_shopping.png" alt="">
            </a>
        </div>
    </div>
    <!-- 导航====================================================== -->
    <div id="nav" >
        <div class="nav-all nav2">
            <div class="nav-left">
                <a href="javascript:;">全部商品类目</a>
                <div class="nav-list">
                    <em class="nav-sxin xiaoxin"></em>
                    <ul class="nav-ul search-ul">
                        <li>
                            <span class="ok">
                                <div class="ok-cont">
                                    <div class="gx">
                                     <div class="gx-top">
                                            <em>保湿</em>
                                     </div>
                                     <div class="gx-center">
                                        <ul>
                                            <h3>保湿</h3>
                                            <li>
                                                <a href="#">舒缓</a>
                                                <a href="#">保湿补水</a>
                                            </li>
                                            <h3>清洁</h3>
                                            <li>
                                                <a href="#">去角质</a>
                                                <a href="#">卸妆清洁</a>
                                            </li>
                                        </ul>
                                        <ul>
                                            <h3>美白</h3>
                                            <li>
                                                <a href="#">淡斑</a>
                                                <a href="#">提亮肤色</a>
                                                <a href="#">淡化黑眼圈</a>
                                            </li>
                                            <h3>底妆修容</h3>
                                            <li>
                                                <a href="#">提亮肤色</a>
                                                <a href="#">遮瑕</a>
                                                <a href="#">隔离</a>
                                            </li>
                                            <h3>抗老</h3>
                                            <li>
                                                <a href="#">抗污染</a>
                                                <a href="#">抗皱</a>
                                                <a href="#">抗氧化</a>
                                            </li>
                                            <h3>紧致</h3>
                                            <li>
                                                <a href="#">淡化细纹</a>
                                                <a href="#">提拉紧致</a>
                                            </li>
                                        </ul>
                                        <ul>
                                            <h3>防晒</h3>
                                            <li>
                                                <a href="#">防晒</a>
                                                <a href="#">晒后修复</a>
                                            </li>
                                            <h3>控油</h3>
                                            <li>
                                                <a href="#">细致毛孔</a>
                                                <a href="#">祛痘</a>
                                            </li>
                                            <h3>百变妆容</h3>
                                            <li>
                                                <a href="#">炫色金属</a>
                                                <a href="#">魅惑哑光</a>
                                                <a href="#">亮泽水光</a>
                                                <a href="#">清新自然</a>
                                            </li>
                                        </ul>
                                     </div>
                                     <div class="gx-bottom">
                                         <img src="https://ssl1.sephorastatic.cn/wcsfrontend/brand/lancome/lancome_144X60.png" alt="">
                                         <img src="https://ssl2.sephorastatic.cn/wcsfrontend/brand/esteelauder/esteelauder_144X60.png" alt="">
                                         <img src="https://ssl3.sephorastatic.cn/wcsfrontend/brand/mariedalgarcolorstudio/mariedalgarcolorstudio_144X60.png" alt="">
                                         <img src="https://ssl4.sephorastatic.cn/wcsfrontend/brand/fresh/fresh_144X60.png" alt="">
                                     </div>
                                    </div>
                                    <a href="#">
                                    <img src="https://ssl2.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2018/11/banner/hp_tiffany_20181102.jpg" alt="">
                                   </a>
                                </div>
                            </span>
                            <a href="javascript:;">功效</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">保湿补水</a></li>
                                <li class="last"><a href="#" class="one">底妆修容</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span class="ok"></span> -->
                            <a href="javascript:;">护肤</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">打造"天鹅颈"</a></li>
                                <li class="last"><a href="#" class="one">Yes成分</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">彩妆</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">秋日彩妆盘点</a></li>
                                <li class="last"><a href="#" class="one">彩妆惠选礼盒</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">香水</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">秋日馨香盘点</a></li>
                                <li class="last"><a href="#" class="one">小众香氛</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">工具</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">美容仪加持美力</a></li>
                                <li class="last"><a href="#" class="one">美妆蛋套装</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">男士</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">男士赠礼</a></li>
                                <li class="last"><a href="#" class="one">水油平衡</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">洗浴护体</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">洗护沐浴</a></li>
                                <li class="last"><a href="#" class="one">塑身纤体</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">美发护发</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">换季防脱</a></li>
                                <li class="last"><a href="#" class="one">润养秀发防毛躁</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">肤食</a>
                            <ul class="nav-listul">
                                <li class="last"><a href="#" class="one">胶原蛋白饮品</a></li>
                            </ul>
                        </li>
                    </ul>
                    <em class="nav-dxin daxin"></em>
                </div>
            </div>
            <div class="nav-center">
                <ul class="nav-center-list">
                    <li>
                        <a href="#" class="one">畅销榜单</a>
                    </li>
                    <li>
                        <a href="#" class="one">独家发售</a>
                    </li>
                    <li>
                        <a href="#" class="one">礼物套装</a>
                    </li>
                    <li>
                        <a href="#" class="one">全部品牌</a>
                    </li>
                    <li>
                        <a href="#" class="one">预约中心</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="detailall">
        <div class="detail">
            <div class="crumbs">
                <div>
                    <a href="../index/index.html">首页</a>
                </div>
            </div>
            <div class="detailcart">
                <div class="Sbox c">
                    <div class="bigIcon"></div>
                    <img src="https://ssl4.sephorastatic.cn/products/4/7/4/2/5/7/1_n_10212_640x640.jpg" alt="" class="pictures">
                    <span></span>
                </div>
               
                <div class="Bbox d">
                    <img src="https://ssl4.sephorastatic.cn/products/4/7/4/2/5/7/1_n_10212_640x640.jpg" alt="" >
                </div>
                <div class="controlModule">
                    <div class="Arrow">
                        <div class="leftArrow"></div>
                    </div>
                    <ul class="picture">
                        <li class="noOpacity b">
                            <img src="https://ssl4.sephorastatic.cn/products/4/7/4/2/5/7/1_n_10212_50x50.jpg" alt="">
                        </li>
                        <li class="b">
                            <img src="https://ssl1.sephorastatic.cn/products/4/7/4/2/5/7/2_n_10212_50x50.jpg" alt="">
                        </li>
                        <li class="b">
                            <img src="https://ssl3.sephorastatic.cn/products/4/7/4/2/5/7/3_n_10212_50x50.jpg" alt="">
                        </li>
                        <li class="b">
                            <img src="https://ssl1.sephorastatic.cn/products/4/7/4/2/5/7/4_n_10212_50x50.jpg" alt="">
                        </li>
                        <li class="b">
                            <img src="https://ssl2.sephorastatic.cn/products/4/7/4/2/5/7/5_n_10212_50x50.jpg" alt="">
                        </li>
                    </ul>
                    <div class="Errow">
                        <div class="rightArrow"></div>
                    </div>
                </div>
            </div>
            <div class="Productdetail">
                <div class="detailtitle">
                    <div class="testBox">
                        <h1>
                            <p>兰蔻菁纯臻颜焕亮眼霜</p>
                        </h1>
                        <p>LANCOME ABSOLUE REVITALIZING EYE CREAM</p>
                        <p>抗眼周氧化+抗眼周老化   一瓶对抗多种眼部纹路</p>
                    </div>
                    <img src="https://ssl1.sephorastatic.cn/wcsfrontend/brand/lancome/lancome_144X60.png" alt="" class="detailogo">
                </div>
                <div class="delprice">
                    <p class="fore">价格</p>
                    <p class="five">￥</p>
                    <p class="six">1080</p>
                </div>
                <div class="activity">
                    <div class="bigOrSmall">
                        <p class="huodong">活动</p>
                        <ul class="mainList">
                            <li>
                                <div style="float: left; width: 73px;">
                                    <div class="manzeng">满赠</div>
                                </div>
                                <div class="allmian">全场购买任意产品，即可获得丝芙兰直播闪购群宣传小卡1张，限量10万张，赠完即止。</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="capacityElse">
                    <p class="huodong">规格</p>
                    <ul class="boxList">
                        <li class="taozhuang">
                            <span>20ml套装(买20ml送15ml)-优先发货</span>
                        </li>
                        <li class="ml">
                            <span>20ml</span>
                        </li>
                        <li class="taob">
                            <span>套组B（买20ml享40ml)</span>
                        </li>
                        <li class="taoa">
                            <span>20ml套装A（买20ml送15ml）</span>
                        </li>
                    </ul>
                </div>
                <div class="gmnum">
                    <input type="number" value="1">
                </div>
                <div class="fourButton">
                    <div class="joincart"></div>
                    <div class="addCartButton">
                        <a href="../cart/cart.html">加入购物车</a>
                        <div class="delicon"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./details.js"></script>
</html>